<template>
    <view>
        <template v-if="loginType!='teacher'">
            <view>
                <nav-bar fontColor="#333"
                         bgColor="#F0F2F5">
                    <view slot="left">
                        <view class="u-flex">
                            <view class="nav_title">课程表</view>
                            <view class="semester_box">{{ currentChildren.childrenClass }}</view>
                        </view>
                    </view>
                </nav-bar>
                <view class="padding_box"
                      v-if="curriculumList.length>0">
                    <view class="container_box u-flex u-row-between"
                          :key="index"
                          v-for="(item,index) in curriculumList">
                        <view class="left_box">
                            <view class="week">{{ item.week }}</view>
                            <!-- <view class="day">{{ weekList[index].day }}</view> -->
                        </view>
                        <view class="bar_box"
                              :style="{'background': `${bgColorList[index]}`}"></view>
                        <view class="center_box  u-flex-col u-row-between">
                            <view class="title">{{ item.productResp.name }}</view>
                            <view class="address_teacher_box u-flex">
                                <span>{{ item.schoolAddress }}</span><span class="line"></span><span>{{ item.userName }}</span>
                            </view>
                            <view class="time_box">上课时间：{{ item.schoolTime }}</view>
                        </view>
                        <image class="curriculum_img"
                               :src="item.productResp.pic"
                               mode="" />
                    </view>
                </view>
                <view v-else>
                    <meu-empty top="50vh"
                               tipText="暂无课程信息" />
                </view>
            </view>
            <u-tabbar :show="loginType == 'parent'"
                      active-color="#63B9F2"
                      :list="parentList"></u-tabbar>
            <u-tabbar :show="loginType == 'teacher'"
                      active-color="#63B9F2"
                      :list="teacherList"></u-tabbar>
        </template>
        <template v-if="loginType=='teacher'">
            <view>
                <nav-bar fontColor="#333"
                         bgColor="#F0F2F5">
                    <view slot="left">
                        <view class="u-flex">
                            <view class="nav_title">课程表</view>
                            <view class="semester_box">{{ currentChildren.childrenClass }}</view>
                        </view>
                    </view>
                </nav-bar>
                <view class="padding_box"
                      v-if="curriculumList.length>0">
                    <view class="container_box u-flex u-row-between"
                          :key="index"
                          v-for="(item,index) in curriculumList">
                        <view class="left_box">
                            <view class="week">{{ item.week }}</view>
                            <!-- <view class="day">{{ weekList[index].day }}</view> -->
                        </view>
                        <view class="bar_box"
                              :style="{'background': `${bgColorList[index]}`}"></view>
                        <view class="center_box  u-flex-col u-row-between">
                            <view class="title">{{ item.productResp.name }}</view>
                            <view class="address_teacher_box u-flex">
                                <span>{{ item.schoolAddress }}</span><span class="line"></span><span>{{ item.userName }}</span>
                            </view>
                            <view class="time_box">上课时间：{{ item.schoolTime }}</view>
                        </view>
                        <image class="curriculum_img"
                               :src="item.productResp.pic"
                               mode="" />
                    </view>
                </view>
                <view v-else>
                    <meu-empty top="50vh"
                               tipText="暂无课程信息" />
                </view>
            </view>
            <u-tabbar :show="loginType == 'parent'"
                      active-color="#63B9F2"
                      :list="parentList"></u-tabbar>
            <u-tabbar :show="loginType == 'teacher'"
                      active-color="#63B9F2"
                      :list="teacherList"></u-tabbar>
        </template>
    </view>
</template>

<script>
export default {
    data() {
        return {
            loginType: '',

            parentList: [
                {
                    pagePath: "/pages/index/index",
                    iconPath: "/static/images/nav_icon_sy_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_sy_sel@2x.png",
                    text: "首页"
                },
                {
                    pagePath: "/pages/timeimagesles/timeimagesles",
                    iconPath: "/static/images/nav_icon_kcb_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_kcb_sel@2x.png",
                    text: "课程表"
                },
                {
                    pagePath: "/pages/mine/mine",
                    iconPath: "/static/images/nav_icon_wd_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_wd_sel@2x.png",
                    text: "我的"
                },
            ],
            teacherList: [
                {
                    pagePath: "/pages/timeimagesles/timeimagesles",
                    iconPath: "/static/images/nav_icon_kcb_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_kcb_sel@2x.png",
                    text: "课程表"
                },
                {
                    pagePath: "/pages/mine/mine",
                    iconPath: "/static/images/nav_icon_wd_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_wd_sel@2x.png",
                    text: "我的"
                },
            ],
            bgColorList: [
                '#A6D979', '#63B9F2', '#F7DD70', '#F78A70', '#7F63F2'
            ],
            curriculumList: [
            ],
            currentChildren: {},
        }
    },
    watch: {
    },
    onLoad() {

        this.loginType = uni.getStorageSync('loginType')
        this.currentChildren = uni.getStorageSync('currentChildren')
        if (this.loginType == 'teacher') {
            this.getTeacherClassPage()
        } else {
            this.getStudentClassPage()
        }

    },
    /* 下拉刷新 */
    onPullDownRefresh() {
        let _this = this
        setTimeout(() => {
            if (_this.loginType == 'teacher') {
                _this.getTeacherClassPage()
            } else {
                _this.getStudentClassPage()
            }
        }, 500);
    },
    onShareAppMessage: function (res) {
    },
    methods: {

        getTeacherClassPage() {
            this.$api.teacherClassPage({}, res => {
                console.log('>>>>>>>>>>>>>>>>', res.data)
                if (res.code == 0) {
                    this.curriculumList = res.data
                }
                // 获取完数据收尾
                uni.stopPullDownRefresh();
            });
        },
        getStudentClassPage() {
            this.$api.studentClassPage({}, res => {
                console.log('>>>>>>>>>>>>>>>>', res.data)
                if (res.code == 0) {
                    this.curriculumList = res.data
                }
                // 获取完数据收尾
                uni.stopPullDownRefresh();
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.padding_box {
    padding: 30rpx;
}
.nav_title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin: 0 16rpx 0 30rpx;
}
.semester_box {
    padding: 8rpx;
    border-radius: 8rpx;
    background: #ebebeb;
    color: #999;
    font-size: 24rpx;
}
.container_box {
    padding: 30rpx;
    border-radius: 32rpx;
    background-color: #fff;
}
.container_box + .container_box {
    margin-top: 30rpx;
}
.left_box {
    width: 106rpx;
    margin-left: 15rpx;
    .week {
        font-size: 28rpx;
        font-weight: bold;
    }
    .day {
        margin-top: 8rpx;
        font-size: 24rpx;
    }
}
.bar_box {
    width: 8rpx;
    height: 146rpx;
    margin-right: 40rpx;
    border-radius: 6rpx;
}
.center_box {
    align-items: unset;
    flex: 1;
    .title {
        font-size: 36rpx;
    }
    .address_teacher_box {
        font-size: 24rpx;
        margin: 20rpx 0;
    }
    .line {
        width: 4rpx;
        height: 20rpx;
        margin: 0 16rpx;
        background-color: #e6e6e6;
    }
    .time_box {
        font-size: 24rpx;
        color: #999;
    }
}
.curriculum_img {
    width: 146rpx;
    height: 146rpx;
}
</style>
